<template>
    <div class="list">
        <div class="list_item" v-for="(item, index) of list" :key="index">
            <div class="list_item_img">
                <img :src="item.img" alt="" />
            </div>
            <p class="list_item_title">{{ item.title }}</p>
            <p class="list_item_desc">{{ item.desc }}</p>
            <p class="list_item_price">
                <span class="new_price">¥{{ item.price }}</span>
                <span class="old_price">¥{{ item.oldPrice }}</span>
            </p>
            <van-button class="btn" size="small" type="danger"
                >立即购买</van-button
            >
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    props: ["list"],
    setup() {
        return {};
    }
});
</script>

<style lang="scss" scoped>
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    &_item {
        width: 50%;
        text-align: center;
        padding: 3px;
        &_img {
            height: 120px;
            background: #f5f5f5;
            text-align: center;
            padding: 10px;
            img {
                width: 90px;
                height: 100px;
            }
        }
        &_title {
            text-align: center;
            padding: 2px 5px;
            font-size: 15px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        &_desc {
            padding-top: 0;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.54118);
            padding: 2px 5px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        &_price {
            text-align: center;
            line-height: 30px;
            .new_price {
                font-size: 18px;
                font-weight: 500;
                color: #ea625b;
                margin-right: 10px;
            }
            .old_price {
                font-size: 16px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.54118);
                text-decoration: line-through;
            }
        }
        .btn {
            color: #fff;
            border: none;
        }
    }
}
</style>
